import React, { useState } from 'react';
import {
  DesktopOutlined,
  FileOutlined,
  PieChartOutlined,
  TeamOutlined,
  UserOutlined,
  BackwardOutlined
} from '@ant-design/icons';
import { Breadcrumb, Layout, Menu, theme } from 'antd';
import logo from "../assets/images/logo.png"
import {Outlet,Link} from "react-router-dom"
import MuMenu from '../components/MuMenu';
import Panel from '../components/Panel';

const { Header, Content, Footer, Sider } = Layout;

/**
 * 菜单需要的数据
 * @param {} label 
 * @param {*} key 
 * @param {*} icon 
 * @param {*} children 
 * @returns 
 */


const Home = () => {
  const [collapsed, setCollapsed] = useState(false);
  const {
    token: { colorBgContainer },
  } = theme.useToken();
  return (
    <Layout
      style={{
        minHeight: '100vh',
      }}
    >
      <Sider collapsible collapsed={collapsed} onCollapse={(value) => setCollapsed(value)}>
        <div style={{ padding: "20px 0px 0px 20px", boxSizing: "border-box" }}>
          <img width="150px" src={logo} alt="" />
        </div>
        <MuMenu></MuMenu>
      </Sider>
      <Layout>
        <Header
          style={{
            padding: 0,
            background: colorBgContainer,
          }}
        />
        <Content
          style={{
            margin: '0 16px',
          }}
        >
          <Breadcrumb
            style={{
              margin: '16px 0',
            }}
          >
            <Breadcrumb.Item>User</Breadcrumb.Item>
            <Breadcrumb.Item>Bill</Breadcrumb.Item>
          </Breadcrumb>
          <Panel></Panel>
          <div
            style={{
              padding: 24,
              minHeight: 360,
              background: colorBgContainer,
            }}
          >
            {/* 路由渲染出口 */}
            <Outlet></Outlet>
          </div>
        </Content>
        <Footer
          style={{
            textAlign: 'center',
          }}
        >
          Ant Design ©2023 Created by Ant UED
          <BackwardOutlined />
        </Footer>
      </Layout>
    </Layout>
  );
};
export default Home;